<template>
  <div class="app-container">
    <el-row>
      <el-card>
        <el-row class="text-right m-b">
          <el-table :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))" style="width: 100%" stripe="true" maxheight="100">
            <!-- label是显示的标签，prob是对应data当中的名称，每一个对象当中都应该包含prop -->
            <el-table-column label="星期" prop="week" align="center">
              <template slot-scope="{row}">
                <span>{{ row.week }}</span>
              </template>
            </el-table-column>
            <el-table-column label="时段" prop="time" align="center">
              <!-- 上午 -->
              <el-table-column label="上午" prop="morning" align="center">
                <el-table-column label="姓名" prop="name" align="center">
                  <template slot-scope="{row}">
                    <ul>
                      <el-tag v-for="name in row.morning_name" :key="name" type="success" class="tag-center">{{ name }}</el-tag>
                    </ul>
                  </template>
                </el-table-column>
                <el-table-column label="机房" prop="room" align="center">
                  <template slot-scope="{row}">
                    <ul>
                      <el-tag v-for="room in row.morning_room" :key="room" type="info" class="tag-center">{{ room }}</el-tag>
                    </ul>
                  </template>
                </el-table-column>
              </el-table-column>
              <!-- 下午 -->
              <el-table-column label="下午" prop="time" align="center">
                <el-table-column label="姓名" prop="name" align="center">
                  <template slot-scope="{row}">
                    <ul>
                      <el-tag v-for="name in row.noon_name" :key="name" type="success" class="tag-center">{{ name }}</el-tag>
                    </ul>
                  </template>
                </el-table-column>
                <el-table-column label="机房" prop="room" align="center">
                  <template slot-scope="{row}">
                    <ul>
                      <el-tag v-for="room in row.noon_room" :key="room" type="info" class="tag-center">{{ room }}</el-tag>
                    </ul>
                  </template>
                </el-table-column>
              </el-table-column>
              <!-- 晚上 -->
              <el-table-column label="晚上" prop="week" align="center">
                <el-table-column label="姓名" prop="name" align="center">
                  <template slot-scope="{row}">
                    <ul>
                      <el-tag v-for="name in row.night_name" :key="name" type="success" class="tag-center">{{ name }}</el-tag>
                    </ul>
                  </template>
                </el-table-column>
                <el-table-column label="机房" prop="room" align="center">
                  <template slot-scope="{row}">
                    <ul>
                      <el-tag v-for="room in row.night_room" :key="room" type="info" class="tag-center">{{ room }}</el-tag>
                    </ul>
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table-column>

          </el-table>
        </el-row>
      </el-card>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // ['114', '118', '214', '215', '216', '217', '218', '314', '316', '317', '318', '415', '416', '418']
      tableData: [{
        id: '1',
        week: '周一',
        morning_room: ['114', '118', '215', '217', '314', '317', '318', '418'],
        morning_name: ['彭证熹', '覃杰霖'],
        noon_room: ['114', '118', '214', '215', '218', '314', '316', '318', '416', '418'],
        noon_name: ['黄士智', '卢冠霖'],
        night_room: ['214', '314', '318'],
        night_name: ['廖名康']
      }, {
        id: '2',
        week: '周二',
        morning_room: ['114', '215', '217', '314', '318', '415', '416'],
        morning_name: ['韦星竹', '覃文卓'],
        noon_room: ['114', '118', '214', '215', '218', '314', '318', '418'],
        noon_name: ['严琪', '冯子轩'],
        night_room: ['317'],
        night_name: ['耿静']
      }, {
        id: '3',
        week: '周三',
        morning_room: ['118', '214', '215', '216', '217', '218', '314', '316', '317', '318', '416', '416'],
        morning_name: ['吴宇曦', '冯子轩'],
        noon_room: ['114', '118', '214', '217', '218', '314', '318', '415', '416'],
        noon_name: ['姚建迪', '陈钰然'],
        night_room: ['317', '416'],
        night_name: ['赵汝发']
      }, {
        id: '4',
        week: '周四',
        morning_room: ['114', '118', '214', '215', '216', '218', '314', '317', '318', '416'],
        morning_name: ['蓝春艳', '杨紫冰'],
        noon_room: ['114', '118', '214', '217', '218', '318', '418'],
        noon_name: ['宁开慧', '项汉'],
        night_room: ['118', '214', '217', '314', '318', '415', '416', '418'],
        night_name: ['宁开慧', '丘韵琳']
      }, {
        id: '5',
        week: '周五',
        morning_room: ['114', '217', '314', '317', '318', '414', '416'],
        morning_name: ['彭证熹', '覃杰霖'],
        noon_room: [],
        noon_name: [],
        night_room: [],
        night_name: []
      }]
    }
  },
  methods: {
    checkPhone(rule, value, callback) {
      const mobileReg = /^1[3456789]\d{9}$/
      if (!mobileReg.test(value)) {
        callback(new Error('手机号格式不正确！'))
      } else {
        callback()
      }
    },
    handleEdit(row) {
      this.tempTableData = Object.assign({}, row)
      this.tempTableData.id = row.id
      this.tempTableData.name = row.name
      this.tempTableData.week = row.week
      this.tempTableData.time = row.time
      console.log(row.name)
      this.dialogEditFormVisible = true
    },
    // 现在想要实现的效果是，更新完数据之后，数据要能够直接显示在原表单里。
    createData() {
      this.$refs['tempTableData'].validate((valid) => {
        if (valid) {
          // 找到对应数据的行
          const index = this.tableData.findIndex(item => item.id === this.tempTableData.id)
          if (index !== -1) {
          // 找到对应的行，更新数据
            this.tableData.splice(index, 1, this.tempTableData)
          }
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
          this.cancleAction()
        } else {
          this.$message({
            showClose: true,
            message: '请再次核对信息！',
            type: 'error'
          })
        }
      })
    },
    cancleAction() {
      this.dialogAddFormVisible = false
      this.dialogEditFormVisible = false
      this.tempTableData = [{
        id: '',
        name: '',
        week: '',
        time: '',
        phoneNumber: ''
      }]
    },
    handleDelete(index, row) {
      this.$confirm('此操作将删除该管理员的检查信息，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning' }).then(() => { // 找到要删除的员工在数组中的索引
        const index = this.tableData.indexOf(row) // 从数组中删除员工
        this.tableData.splice(index, 1)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消删除' })
      }
      )
      console.log(index, row)
    },
    // 设置ID号
    indexMethod(index) {
      return index + 1
    },
    handleAdd() {
      this.dialogAddFormVisible = true
    },
    addData() {
      this.$refs['tempTableData'].validate((valid) => {
        if (valid) {
          this.$confirm('确认要添加？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning' }).then(() => {
            this.tableData.push(this.tempTableData)
            this.$message({
              type: 'success',
              message: '增加成功!'
            })
            this.cancleAction()
          })
        } else {
          this.$message({
            showClose: true,
            message: '请检查信息是否填写完整！',
            type: 'error'
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: center;
  align-items: center;
}
.tag-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
